<!DOCTYPE html>
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<script type="text/javascript" src="tree-min/tree.js"></script>
		<script type="text/javascript">
			window.onload=function(){
				initData();
				simple01();
				simple02(treeClick, treeDblClick, treeContextmenu);
				simple03();
				simple04();
				simple05();
				simple06();
			}
			function initData(){
				window.dataList=[];
				dataList.push({id:'10000',name:'宇燕树',parentId:""});//根
				
				dataList.push({id:'10100',name:'默认树',parentId:"10000"});//默认树
				dataList.push({id:'10200',name:'数据树',parentId:"10000"});//数据树
				dataList.push({id:'10300',name:'组织树',parentId:"10000"});//组织树
				dataList.push({id:'10400',name:'人员树',parentId:"10000"});//人员树
				dataList.push({id:'10500',name:'其它树',parentId:"10000"});//其它树
				
				dataList.push({id:'10101',name:'默认节点',parentId:"10100"});//默认节点
				
				dataList.push({id:'10201',name:'秘钥节点',type:'key',parentId:"10200"});//秘钥节点
				dataList.push({id:'10202',name:'数据库节点',type:'database',parentId:"10200"});//数据库节点
				dataList.push({id:'10203',name:'数据源节点',type:'datasource',parentId:"10200"});//数据源节点
				dataList.push({id:'10204',name:'表节点',type:'table',parentId:"10200"});//数据源节点
				
				dataList.push({id:'10301',name:'组织节点',type:'org',parentId:"10300"});//组织节点
				dataList.push({id:'10301',name:'组织节点(灰)',type:'cancel-org',parentId:"10300"});//组织节点(灰)
				
				dataList.push({id:'10401',name:'人员节点',type:'person',parentId:"10400"});//人员节点
				dataList.push({id:'10402',name:'人员节点(灰)',type:'cancel-person',parentId:"10400"});//人员节点(灰)
				dataList.push({id:'10403',name:'人员节点2',type:'person2',parentId:"10400"});//人员节点(灰)
				
				dataList.push({id:'10501',name:'文件夹树',type:'folder',parentId:"10500"});//
				dataList.push({id:'10502',name:'方法树',type:'function',parentId:"10500"});//
				dataList.push({id:'10503',name:'文件节点',type:'file',parentId:"10500"});//
				dataList.push({id:'10504',name:'流程节点',type:'flow',parentId:"10500"});//
				dataList.push({id:'10505',name:'任务节点',type:'task',parentId:"10500"});//
				dataList.push({id:'10506',name:'分支节点',type:'brach',parentId:"10500"});//
				dataList.push({id:'10507',name:'网页节点',type:'browser',parentId:"10500"});//
				dataList.push({id:'10508',name:'帮助文档树',type:'help',parentId:"10500"});//
				dataList.push({id:'10509',name:'图片节点',type:'photo',parentId:"10500"});//
				dataList.push({id:'10510',name:'项目2节点',type:'project2',parentId:"10500"});//
				dataList.push({id:'10511',name:'资源树',type:'resource',parentId:"10500"});//
				dataList.push({id:'10512',name:'win8树',type:'win8',parentId:"10500"});//
				
				dataList.push({id:'1050101',name:'文件夹节点',type:'folder',parentId:"10501"});//
				dataList.push({id:'1050201',name:'方法节点',type:'function',parentId:"10502"});//
				dataList.push({id:'1050801',name:'帮助文档节点',type:'help',parentId:"10508"});//
				dataList.push({id:'1051101',name:'资源树',type:'resource',parentId:"10511"});//
				dataList.push({id:'1051201',name:'win8节点',type:'win8',parentId:"10512"});//
			}
			function simple01(){
				var tree=new Tree('simple-01');//Tree有一个参数id，方便在其它地方调用，可使用方法Tree.getTree(id)获取树
				parseTreeNode(tree, "", dataList);
				tree.show('simple-01-parent', undefined, true);
			}
			function simple02(click, dblclick, contextmenu){
				var tree=new Tree('simple-02');//Tree有一个参数id，方便在其它地方调用，可使用方法Tree.getTree(id)获取树
				parseTreeNode(tree, "", dataList, click, dblclick, contextmenu);
				tree.show('simple-02-parent', undefined, true);
			}
			function simple03(){
				var tree=new Tree('simple-03');//Tree有一个参数id，方便在其它地方调用，可使用方法Tree.getTree(id)获取树
				parseTreeNode(tree, "", dataList, undefined, undefined, undefined, "#AAAAAA");
				tree.show('simple-03-parent', undefined, true);
			}
			function simple04(){
				var tree=new Tree('simple-04');//Tree有一个参数id，方便在其它地方调用，可使用方法Tree.getTree(id)获取树
				var node=new TreeNode({
					id		:	'-1',
					name	:	'动态增加',
					click	:	dyclick,
					open	:	true
				});
				tree.append(node);
				tree.show('simple-04-parent', undefined, true);
			}
			function simple05(){
				var tree=new Tree('simple-05');//Tree有一个参数id，方便在其它地方调用，可使用方法Tree.getTree(id)获取树
				parseTreeNode(tree, "", dataList, undefined, undefined, undefined, undefined, {});
				tree.show('simple-05-parent', undefined, true);
			}
			function simple06(){
				var tree=new Tree('simple-06');//Tree有一个参数id，方便在其它地方调用，可使用方法Tree.getTree(id)获取树
				parseTreeNode(tree, "", dataList, undefined, undefined, undefined, undefined, {click:function(){return false;}});
				tree.show('simple-06-parent', undefined, true);
			}
			function parseTreeNode(parentNode, parentId, dataList, click, dblclick, contextmenu, nodeNameColor, checkbox){
				var node;
				for (var i = 0,length=dataList.length; i < length; i++) {
					if(dataList[i].parentId==parentId){
						var node=new TreeNode({
							id			:	dataList[i].id,
							name		:	dataList[i].name,
							type		:	dataList[i].type,
							click		:	click,
							dblclick	:	dblclick,
							contextmenu	:	contextmenu,
							nameColor	:	nodeNameColor||"#000000",
							checkbox	:	checkbox||undefined,
							open		:	true
						});
						parentNode.append(node);
						parseTreeNode(node, node.id, dataList, click, dblclick, contextmenu, nodeNameColor, checkbox);
					}
				}
			}
			function treeClick(node){
				document.getElementById("text-node").value="单击了："+node.name;
			}
			function treeDblClick(node){
				document.getElementById("text-node").value="双击了："+node.name;
			}
			function treeContextmenu(node){
				document.getElementById("text-node").value="右键了："+node.name;
				return false;
			}
			function dyclick(node){
				window.currNode=node;
			}
			function addTreeNode(event){
				var event=event||window.event;
				if(event){
					event.returnValue=false;
					event.cancelBubble=true;
				}
				var dialog=createDialog();
				var inner='<div style="font-size:15px;font-weight:bolder;height:40px;">增加树节点</div>';
				inner+='<div style="height:35px;">节点ID：<input type="text" id="nodeId" /></div>';
				inner+='<div style="height:35px;">节点名称：<input type="text" id="nodeName" /></div>';
				inner+='<div style="height:35px;"><input type="button" onclick="controlAddNode();" value="确认增加"></div>';
				dialog.innerHTML=inner;
			}
			function controlAddNode(){
				if(!window.currNode){
					alert('请选择节点');
					return false;
				}
				var nodeId=document.getElementById("nodeId");
				var nodeName=document.getElementById("nodeName");
				if(!nodeId.value){
					alert('请输入节点ID');
					nodeId.focus();
					return false;
				}
				if(!nodeName.value){
					alert('请输入节点名称');
					nodeName.focus();
					return false;
				}
				var tree=Tree.getTree('simple-04');
				var tnode=tree.get(nodeId.value);
				if(tnode){
					alert('此节点已存在');
					return false;
				}
				
				var node=new TreeNode({
					id		:	nodeId.value,
					name	:	nodeName.value,
					click	:	dyclick,
					open	:	true
				});
				window.currNode.append(node);
				document.getElementById('dialog').style.display="none";
			}
			function insertTreeNode(event){
				var event=event||window.event;
				if(event){
					event.returnValue=false;
					event.cancelBubble=true;
				}
				var dialog=createDialog();
				var inner='<div style="font-size:15px;font-weight:bolder;height:40px;">插入树节点</div>';
				inner+='<div style="height:35px;">节点ID：<input type="text" id="nodeId" /></div>';
				inner+='<div style="height:35px;">节点名称：<input type="text" id="nodeName" /></div>';
				inner+='<div style="height:35px;"><input type="button" onclick="controlInsertNode();" value="确认增加"></div>';
				dialog.innerHTML=inner;
			}
			function controlInsertNode(){
				if(!window.currNode){
					alert('请选择节点');
					return false;
				}
				var nodeId=document.getElementById("nodeId");
				var nodeName=document.getElementById("nodeName");
				if(!nodeId.value){
					alert('请输入节点ID');
					nodeId.focus();
					return false;
				}
				if(!nodeName.value){
					alert('请输入节点名称');
					nodeName.focus();
					return false;
				}
				var tree=Tree.getTree('simple-04');
				var tnode=tree.get(nodeId.value);
				if(tnode){
					alert('此节点已存在');
					return false;
				}
				
				var node=new TreeNode({
					id		:	nodeId.value,
					name	:	nodeName.value,
					click	:	dyclick,
					open	:	true
				});
				window.currNode.parent.append(node,window.currNode.id);
				document.getElementById('dialog').style.display="none";
			}
			function deleteTreeNode(){
				if(!window.currNode){
					alert('请选择节点');
					return false;
				}
				window.currNode.removeTo();
			}
			function showJsCode(simpleType,event){
				var event=event||window.event;
				if(event){
					event.returnValue=false;
					event.cancelBubble=true;
				}
				var code=document.getElementById("code-"+simpleType).innerHTML;
				var dialog=createDialog(1000, 400);
				dialog.innerHTML='<div style="margin:5px;line-height:20px;text-align:left;font-family:\'courier new\';width:1400px;">'+codeStyle(code)+"</div>";
			}
			function codeStyle(code){
				code=code.replace(new RegExp('<','g'),'&lt;');
				code=code.replace(new RegExp('>','g'),'&gt;');
				code=code.replace(new RegExp('&lt;div','g'),'<font color="green">&lt;div</font>');
				code=code.replace(new RegExp('\t\t\t\t\t','g'),'');
				code=code.replace(new RegExp(' ','g'),'&nbsp;');
				code=code.replace(new RegExp('\n','g'),'<br/>');
				code=code.replace(new RegExp('\t','g'),'&nbsp;&nbsp;&nbsp;&nbsp;');
				code=code.replace(new RegExp('function','g'),'<font color="#7f0055">function</font>');
				code=code.replace(new RegExp('var','g'),'<font color="#7f0055">var</font>');
				code=code.replace(new RegExp('return','g'),'<font color="#7f0055">return</font>');
				code=code.replace(new RegExp('false','g'),'<font color="#7f0055">false</font>');
				code=code.replace(new RegExp('true','g'),'<font color="#7f0055">true</font>');
				return code;
			}
			function createDialog(initWidth, initHeight){
				var dialog=document.getElementById('dialog');
				if(!dialog){
					var width=initWidth||500;
					var height=initHeight||200;
					var top=(screenHeight()-height)/2+(document.body.scrollTop||document.documentElement.scrollTop);
					var left=(screenWidth()-width)/2;
					dialog=document.createElement("div");
					dialog.id="dialog";
					dialog.style.cssText='width:'+width+'px;height:'+height+'px;position:absolute;z-index:1000;top:'+top+'px;left:'+left+'px;border:3px solid blue;background:#FFFFFF;text-align:center;overflow:auto;';
					dialog.onclick=function(event){
						var event=event||window.event;
						if(event){
							event.returnValue=false;
							event.cancelBubble=true;
						}
						return false;
					}
					document.body.appendChild(dialog);
					document.body.onclick=function(){
						document.getElementById('dialog').style.display="none";
					}
				}else{
					var width=initWidth||500;
					var height=initHeight||200;
					var top=(screenHeight()-height)/2+(document.body.scrollTop||document.documentElement.scrollTop);
					var left=(screenWidth()-width)/2;
					dialog.style.display="";
					dialog.style.top=top+"px";
					dialog.style.left=left+"px";
					dialog.style.width=width+"px";
					dialog.style.height=height+"px";
				}
				return dialog; 
			}
			function screenWidth(){
				return document.documentElement.clientWidth||document.documentElement.offsetWidth||document.body.clientWidth||document.body.offsetWidth;
			};
			function screenHeight(){
				return document.documentElement.clientHeight||document.documentElement.offsetHeight||document.body.clientHeight||document.body.offsetHeight;
			};
			
		</script>
		<style type="text/css">
			html,body{padding:0px;margin:0px;font-size:13px;}
		</style>
	</head>
	<body>
		<div style="text-align:center;">
			<h1>欢迎使用宇燕js树</h1>
		</div>
		<hr/>
		<div>
			<span style="float:left;margin:3px;width:302px;">
				<div>例1：展示各种树节点</div>
				<div id="simple-01-parent" style="width:300px;height:300px;border:1px solid #AAAAAA;"></div>
				<div><a href="javascript:;" onclick="showJsCode('01',event);">js代码</a></div>
				<div id="code-01" style="display: none;">//引用js，src路径根据具体开发时设置
					&lt;script type="text/javascript" src="tree-min/tree.js"&gt;&lt;/script&gt;
					//页面初始化
					window.onload=function(){
						initData();
						simple01();
					}
					//初始化树数据，默认存储为一个列表
					function initData(){
						window.dataList=[];
						dataList.push({id:'10000',name:'宇燕树',parentId:""});//根
						
						dataList.push({id:'10100',name:'默认树',parentId:"10000"});//默认树
						dataList.push({id:'10200',name:'数据树',parentId:"10000"});//数据树
						dataList.push({id:'10300',name:'组织树',parentId:"10000"});//组织树
						dataList.push({id:'10400',name:'人员树',parentId:"10000"});//人员树
						dataList.push({id:'10500',name:'其它树',parentId:"10000"});//其它树
						
						dataList.push({id:'10101',name:'默认节点',parentId:"10100"});//默认节点
						
						dataList.push({id:'10201',name:'秘钥节点',type:'key',parentId:"10200"});//秘钥节点
						dataList.push({id:'10202',name:'数据库节点',type:'database',parentId:"10200"});//数据库节点
						dataList.push({id:'10203',name:'数据源节点',type:'datasource',parentId:"10200"});//数据源节点
						dataList.push({id:'10204',name:'表节点',type:'table',parentId:"10200"});//数据源节点
						
						dataList.push({id:'10301',name:'组织节点',type:'org',parentId:"10300"});//组织节点
						dataList.push({id:'10301',name:'组织节点(灰)',type:'cancel-org',parentId:"10300"});//组织节点(灰)
						
						dataList.push({id:'10401',name:'人员节点',type:'person',parentId:"10400"});//人员节点
						dataList.push({id:'10402',name:'人员节点(灰)',type:'cancel-person',parentId:"10400"});//人员节点(灰)
						dataList.push({id:'10403',name:'人员节点2',type:'person2',parentId:"10400"});//人员节点(灰)
						
						dataList.push({id:'10501',name:'文件夹树',type:'folder',parentId:"10500"});//
						dataList.push({id:'10502',name:'方法树',type:'function',parentId:"10500"});//
						dataList.push({id:'10503',name:'文件节点',type:'file',parentId:"10500"});//
						dataList.push({id:'10504',name:'流程节点',type:'flow',parentId:"10500"});//
						dataList.push({id:'10505',name:'任务节点',type:'task',parentId:"10500"});//
						dataList.push({id:'10506',name:'分支节点',type:'brach',parentId:"10500"});//
						dataList.push({id:'10507',name:'网页节点',type:'browser',parentId:"10500"});//
						dataList.push({id:'10508',name:'帮助文档树',type:'help',parentId:"10500"});//
						dataList.push({id:'10509',name:'图片节点',type:'photo',parentId:"10500"});//
						dataList.push({id:'10510',name:'项目2节点',type:'project2',parentId:"10500"});//
						dataList.push({id:'10511',name:'资源树',type:'resource',parentId:"10500"});//
						dataList.push({id:'10512',name:'win8树',type:'win8',parentId:"10500"});//
						
						dataList.push({id:'1050101',name:'文件夹节点',type:'folder',parentId:"10501"});//
						dataList.push({id:'1050201',name:'方法节点',type:'function',parentId:"10502"});//
						dataList.push({id:'1050801',name:'帮助文档节点',type:'help',parentId:"10508"});//
						dataList.push({id:'1051101',name:'资源树',type:'resource',parentId:"10511"});//
						dataList.push({id:'1051201',name:'win8节点',type:'win8',parentId:"10512"});//
					}
					//例1方法，创建树及显示树
					function simple01(){
						var tree=new Tree('simple-01');//Tree有一个参数id，方便在其它地方调用，可使用方法Tree.getTree(id)获取树
						parseTreeNode(tree, "", dataList);
						tree.show('simple-01-parent', undefined, true);
					}
					//解析初始化的数据列表
					function parseTreeNode(parentNode, parentId, dataList){
						var node;
						for (var i = 0,length=dataList.length; i < length; i++) {
							if(dataList[i].parentId==parentId){
								var node=new TreeNode({
									id			:	dataList[i].id,
									name		:	dataList[i].name,
									type		:	dataList[i].type,
									open		:	true
								});
								parentNode.append(node);
								parseTreeNode(node, node.id, dataList);
							}
						}
					}
					<!-- 页面html代码 -->
					<div id="simple-01-parent" style="width:300px;height:300px;border:1px solid #AAAAAA;float:left;margin:3px;">
					</div>
				</div>
			</span>
			<span style="float:left;margin:3px;width:302px;">
				<div>例2：单击、双击、右键<input type="text" id="text-node" style="color:red;"/></div>
				<div id="simple-02-parent" style="width:300px;height:300px;border:1px solid #AAAAAA;"></div>
				<div><a href="javascript:;" onclick="showJsCode('02',event);">js代码</a></div>
				<div id="code-02" style="display: none;">//引用js，src路径根据具体开发时设置
					&lt;script type="text/javascript" src="tree-min/tree.js"&gt;&lt;/script&gt;
					window.onload=function(){
						initData();
						//treeClick、treeDblClick、treeContextmenu分别为单击、双击、右击事件方法名称，在下面有声明
						simple02(treeClick, treeDblClick, treeContextmenu);
					}
					//初始化树数据，默认存储为一个列表
					function initData(){
						window.dataList=[];
						dataList.push({id:'10000',name:'宇燕树',parentId:""});//根
						
						dataList.push({id:'10100',name:'默认树',parentId:"10000"});//默认树
						dataList.push({id:'10200',name:'数据树',parentId:"10000"});//数据树
						dataList.push({id:'10300',name:'组织树',parentId:"10000"});//组织树
						dataList.push({id:'10400',name:'人员树',parentId:"10000"});//人员树
						dataList.push({id:'10500',name:'其它树',parentId:"10000"});//其它树
						
						dataList.push({id:'10101',name:'默认节点',parentId:"10100"});//默认节点
						
						dataList.push({id:'10201',name:'秘钥节点',type:'key',parentId:"10200"});//秘钥节点
						dataList.push({id:'10202',name:'数据库节点',type:'database',parentId:"10200"});//数据库节点
						dataList.push({id:'10203',name:'数据源节点',type:'datasource',parentId:"10200"});//数据源节点
						dataList.push({id:'10204',name:'表节点',type:'table',parentId:"10200"});//数据源节点
						
						dataList.push({id:'10301',name:'组织节点',type:'org',parentId:"10300"});//组织节点
						dataList.push({id:'10301',name:'组织节点(灰)',type:'cancel-org',parentId:"10300"});//组织节点(灰)
						
						dataList.push({id:'10401',name:'人员节点',type:'person',parentId:"10400"});//人员节点
						dataList.push({id:'10402',name:'人员节点(灰)',type:'cancel-person',parentId:"10400"});//人员节点(灰)
						dataList.push({id:'10403',name:'人员节点2',type:'person2',parentId:"10400"});//人员节点(灰)
						
						dataList.push({id:'10501',name:'文件夹树',type:'folder',parentId:"10500"});//
						dataList.push({id:'10502',name:'方法树',type:'function',parentId:"10500"});//
						dataList.push({id:'10503',name:'文件节点',type:'file',parentId:"10500"});//
						dataList.push({id:'10504',name:'流程节点',type:'flow',parentId:"10500"});//
						dataList.push({id:'10505',name:'任务节点',type:'task',parentId:"10500"});//
						dataList.push({id:'10506',name:'分支节点',type:'brach',parentId:"10500"});//
						dataList.push({id:'10507',name:'网页节点',type:'browser',parentId:"10500"});//
						dataList.push({id:'10508',name:'帮助文档树',type:'help',parentId:"10500"});//
						dataList.push({id:'10509',name:'图片节点',type:'photo',parentId:"10500"});//
						dataList.push({id:'10510',name:'项目2节点',type:'project2',parentId:"10500"});//
						dataList.push({id:'10511',name:'资源树',type:'resource',parentId:"10500"});//
						dataList.push({id:'10512',name:'win8树',type:'win8',parentId:"10500"});//
						
						dataList.push({id:'1050101',name:'文件夹节点',type:'folder',parentId:"10501"});//
						dataList.push({id:'1050201',name:'方法节点',type:'function',parentId:"10502"});//
						dataList.push({id:'1050801',name:'帮助文档节点',type:'help',parentId:"10508"});//
						dataList.push({id:'1051101',name:'资源树',type:'resource',parentId:"10511"});//
						dataList.push({id:'1051201',name:'win8节点',type:'win8',parentId:"10512"});//
					}
					//例2方法，创建树及显示树
					function simple02(click, dblclick, contextmenu){
						var tree=new Tree('simple-02');//Tree有一个参数id，方便在其它地方调用，可使用方法Tree.getTree(id)获取树
						parseTreeNode(tree, "", dataList, click, dblclick, contextmenu);
						tree.show('simple-02-parent', undefined, true);
					}
					//解析初始化的数据列表
					function parseTreeNode(parentNode, parentId, dataList, click, dblclick, contextmenu){
						var node;
						for (var i = 0,length=dataList.length; i < length; i++) {
							if(dataList[i].parentId==parentId){
								var node=new TreeNode({
									id			:	dataList[i].id,
									name		:	dataList[i].name,
									type		:	dataList[i].type,
									click		:	click,
									dblclick	:	dblclick,
									contextmenu	:	contextmenu,
									open		:	true
								});
								parentNode.append(node);
								parseTreeNode(node, node.id, dataList, click, dblclick, contextmenu);
							}
						}
					}
					//树节点单击事件
					function treeClick(node){
						document.getElementById("text-node").value="单击了："+node.name;
					}
					//树节点双击事件
					function treeDblClick(node){
						document.getElementById("text-node").value="双击了："+node.name;
					}
					//树节点右击事件
					function treeContextmenu(node){
						document.getElementById("text-node").value="右键了："+node.name;
						return false;
					}
					<!-- 页面html代码 -->
					&lt;input type="text" id="text-node" style="color:red;"/&gt;
					<div id="simple-02-parent" style="width:300px;height:300px;border:1px solid #AAAAAA;">
					</div>
				</div>
			</span>
			<span style="float:left;margin:3px;width:302px;">
				<div>例3：灰色树</div>
				<div id="simple-03-parent" style="width:300px;height:300px;border:1px solid #AAAAAA;"></div>
				<div><a href="javascript:;" onclick="showJsCode('03',event);">js代码</a></div>
				<div id="code-03" style="display: none;">//引用js，src路径根据具体开发时设置
					&lt;script type="text/javascript" src="tree-min/tree.js"&gt;&lt;/script&gt;
					window.onload=function(){
						initData();
						simple03();
					}
					//初始化树数据，默认存储为一个列表
					function initData(){
						window.dataList=[];
						dataList.push({id:'10000',name:'宇燕树',parentId:""});//根
						
						dataList.push({id:'10100',name:'默认树',parentId:"10000"});//默认树
						dataList.push({id:'10200',name:'数据树',parentId:"10000"});//数据树
						dataList.push({id:'10300',name:'组织树',parentId:"10000"});//组织树
						dataList.push({id:'10400',name:'人员树',parentId:"10000"});//人员树
						dataList.push({id:'10500',name:'其它树',parentId:"10000"});//其它树
						
						dataList.push({id:'10101',name:'默认节点',parentId:"10100"});//默认节点
						
						dataList.push({id:'10201',name:'秘钥节点',type:'key',parentId:"10200"});//秘钥节点
						dataList.push({id:'10202',name:'数据库节点',type:'database',parentId:"10200"});//数据库节点
						dataList.push({id:'10203',name:'数据源节点',type:'datasource',parentId:"10200"});//数据源节点
						dataList.push({id:'10204',name:'表节点',type:'table',parentId:"10200"});//数据源节点
						
						dataList.push({id:'10301',name:'组织节点',type:'org',parentId:"10300"});//组织节点
						dataList.push({id:'10301',name:'组织节点(灰)',type:'cancel-org',parentId:"10300"});//组织节点(灰)
						
						dataList.push({id:'10401',name:'人员节点',type:'person',parentId:"10400"});//人员节点
						dataList.push({id:'10402',name:'人员节点(灰)',type:'cancel-person',parentId:"10400"});//人员节点(灰)
						dataList.push({id:'10403',name:'人员节点2',type:'person2',parentId:"10400"});//人员节点(灰)
						
						dataList.push({id:'10501',name:'文件夹树',type:'folder',parentId:"10500"});//
						dataList.push({id:'10502',name:'方法树',type:'function',parentId:"10500"});//
						dataList.push({id:'10503',name:'文件节点',type:'file',parentId:"10500"});//
						dataList.push({id:'10504',name:'流程节点',type:'flow',parentId:"10500"});//
						dataList.push({id:'10505',name:'任务节点',type:'task',parentId:"10500"});//
						dataList.push({id:'10506',name:'分支节点',type:'brach',parentId:"10500"});//
						dataList.push({id:'10507',name:'网页节点',type:'browser',parentId:"10500"});//
						dataList.push({id:'10508',name:'帮助文档树',type:'help',parentId:"10500"});//
						dataList.push({id:'10509',name:'图片节点',type:'photo',parentId:"10500"});//
						dataList.push({id:'10510',name:'项目2节点',type:'project2',parentId:"10500"});//
						dataList.push({id:'10511',name:'资源树',type:'resource',parentId:"10500"});//
						dataList.push({id:'10512',name:'win8树',type:'win8',parentId:"10500"});//
						
						dataList.push({id:'1050101',name:'文件夹节点',type:'folder',parentId:"10501"});//
						dataList.push({id:'1050201',name:'方法节点',type:'function',parentId:"10502"});//
						dataList.push({id:'1050801',name:'帮助文档节点',type:'help',parentId:"10508"});//
						dataList.push({id:'1051101',name:'资源树',type:'resource',parentId:"10511"});//
						dataList.push({id:'1051201',name:'win8节点',type:'win8',parentId:"10512"});//
					}
					//例3方法，创建树及显示树
					function simple03(){
						var tree=new Tree('simple-03');//Tree有一个参数id，方便在其它地方调用，可使用方法Tree.getTree(id)获取树
						parseTreeNode(tree, "", dataList, "#AAAAAA");
						tree.show('simple-03-parent', undefined, true);
					}
					//解析初始化的数据列表
					function parseTreeNode(parentNode, parentId, dataList, nodeNameColor){
						var node;
						for (var i = 0,length=dataList.length; i < length; i++) {
							if(dataList[i].parentId==parentId){
								var node=new TreeNode({
									id			:	dataList[i].id,
									name		:	dataList[i].name,
									type		:	dataList[i].type,
									nameColor	:	nodeNameColor||"#000000",
									open		:	true
								});
								parentNode.append(node);
								parseTreeNode(node, node.id, dataList, nodeNameColor);
							}
						}
					}
					<!-- 页面html代码 -->
					<div id="simple-03-parent" style="width:300px;height:300px;border:1px solid #AAAAAA;">
					</div>
				</div>
			</span>
			<span style="float:left;margin:3px;width:302px;">
				<div>例4：动态操作<input type="button" value="增加" onclick="addTreeNode(event);"><input type="button" value="插入" onclick="insertTreeNode(event);"><input type="button" value="删除" onclick="deleteTreeNode(event);"></div>
				<div id="simple-04-parent" style="width:300px;height:300px;border:1px solid #AAAAAA;"></div>
				<div><a href="javascript:;" onclick="showJsCode('04',event);">js代码</a></div>
				<div id="code-04" style="display: none;">//引用js，src路径根据具体开发时设置
					&lt;script type="text/javascript" src="tree-min/tree.js"&gt;&lt;/script&gt;
					window.onload=function(){
						simple04();
					}
					//实例4方法，创建树及显示树
					function simple04(){
						var tree=new Tree('simple-04');//Tree有一个参数id，方便在其它地方调用，可使用方法Tree.getTree(id)获取树
						var node=new TreeNode({
							id		:	'-1',
							name	:	'动态增加',
							click	:	dyclick,
							open	:	true
						});
						tree.append(node);
						tree.show('simple-04-parent', undefined, true);
					}
					//选中节点时触发
					function dyclick(node){
						window.currNode=node;
					}
					//在选中节点中增加节点
					function addTreeNode(event){
						var event=event||window.event;
						if(event){
							event.returnValue=false;
							event.cancelBubble=true;
						}
						var dialog=createDialog();
						var inner='&lt;div style="font-size:15px;font-weight:bolder;height:40px;"&gt;增加树节点&lt;/div&gt;';
						inner+='&lt;div style="height:35px;"&gt;节点ID：&lt;input type="text" id="nodeId" /&gt;&lt;/div&gt;';
						inner+='&lt;div style="height:35px;"&gt;节点名称：&lt;input type="text" id="nodeName" /&gt;&lt;/div&gt;';
						inner+='&lt;div style="height:35px;"&gt;&lt;input type="button" onclick="controlAddNode();" value="确认增加"&gt;&lt;/div&gt;';
						dialog.innerHTML=inner;
					}
					//确认增加
					function controlAddNode(){
						if(!window.currNode){
							alert('请选择节点');
							return false;
						}
						var nodeId=document.getElementById("nodeId");
						var nodeName=document.getElementById("nodeName");
						if(!nodeId.value){
							alert('请输入节点ID');
							nodeId.focus();
							return false;
						}
						if(!nodeName.value){
							alert('请输入节点名称');
							nodeName.focus();
							return false;
						}
						var tree=Tree.getTree('simple-04');
						var tnode=tree.get(nodeId.value);
						if(tnode){
							alert('此节点已存在');
							return false;
						}
						
						var node=new TreeNode({
							id		:	nodeId.value,
							name	:	nodeName.value,
							click	:	dyclick,
							open	:	true
						});
						window.currNode.append(node);
						document.getElementById('dialog').style.display="none";
					}
					//在选中节点之前插入节点
					function insertTreeNode(event){
						var event=event||window.event;
						if(event){
							event.returnValue=false;
							event.cancelBubble=true;
						}
						var dialog=createDialog();
						var inner='&lt;div style="font-size:15px;font-weight:bolder;height:40px;"&gt;插入树节点&lt;/div&gt;';
						inner+='&lt;div style="height:35px;"&gt;节点ID：&lt;input type="text" id="nodeId" /&gt;&lt;/div&gt;';
						inner+='&lt;div style="height:35px;"&gt;节点名称：&lt;input type="text" id="nodeName" /&gt;&lt;/div&gt;';
						inner+='&lt;div style="height:35px;"&gt;&lt;input type="button" onclick="controlInsertNode();" value="确认增加"&gt;&lt;/div&gt;';
						dialog.innerHTML=inner;
					}
					//确认插入
					function controlInsertNode(){
						if(!window.currNode){
							alert('请选择节点');
							return false;
						}
						var nodeId=document.getElementById("nodeId");
						var nodeName=document.getElementById("nodeName");
						if(!nodeId.value){
							alert('请输入节点ID');
							nodeId.focus();
							return false;
						}
						if(!nodeName.value){
							alert('请输入节点名称');
							nodeName.focus();
							return false;
						}
						var tree=Tree.getTree('simple-04');
						var tnode=tree.get(nodeId.value);
						if(tnode){
							alert('此节点已存在');
							return false;
						}
						
						var node=new TreeNode({
							id		:	nodeId.value,
							name	:	nodeName.value,
							click	:	dyclick,
							open	:	true
						});
						window.currNode.parent.append(node,window.currNode.id);
						document.getElementById('dialog').style.display="none";
					}
					//删除选中节点
					function deleteTreeNode(){
						if(!window.currNode){
							alert('请选择节点');
							return false;
						}
						window.currNode.removeTo();
					}
					//创建弹出层，居中显示
					function createDialog(initWidth, initHeight){
						var dialog=document.getElementById('dialog');
						if(!dialog){
							var width=initWidth||500;
							var height=initHeight||200;
							var top=(screenHeight()-height)/2;
							var left=(screenWidth()-width)/2;
							dialog=document.createElement("div");
							dialog.id="dialog";
							dialog.style.cssText='width:'+width+'px;height:'+height+'px;position:absolute;z-index:1000;top:'+top+'px;left:'+left+'px;border:3px solid blue;background:#FFFFFF;text-align:center;overflow:auto;';
							dialog.onclick=function(event){
								var event=event||window.event;
								if(event){
									event.returnValue=false;
									event.cancelBubble=true;
								}
								return false;
							}
							document.body.appendChild(dialog);
							document.body.onclick=function(){
								document.getElementById('dialog').style.display="none";
							}
						}else{
							var width=initWidth||500;
							var height=initHeight||200;
							var top=(screenHeight()-height)/2+(document.body.scrollTop||document.documentElement.scrollTop);
							var left=(screenWidth()-width)/2;
							dialog.style.display="";
							dialog.style.top=top+"px";
							dialog.style.left=left+"px";
							dialog.style.width=width+"px";
							dialog.style.height=height+"px";
						}
						return dialog; 
					}
					//计算浏览器可视区域宽度
					function screenWidth(){
						return document.documentElement.clientWidth||document.documentElement.offsetWidth||document.body.clientWidth||document.body.offsetWidth;
					};
					//计算浏览器可视区域高度
					function screenHeight(){
						return document.documentElement.clientHeight||document.documentElement.offsetHeight||document.body.clientHeight||document.body.offsetHeight;
					};
					<!-- 页面html代码 -->
					&lt;input type="button" value="增加" onclick="addTreeNode(event);"&gt;
					&lt;input type="button" value="插入" onclick="insertTreeNode(event);"&gt;
					&lt;input type="button" value="删除" onclick="deleteTreeNode(event);"&gt;
					<div id="simple-04-parent" style="width:300px;height:300px;border:1px solid #AAAAAA;">
					</div>
				</div>
			</span>
			<span style="float:left;margin:3px;width:302px;">
				<div>例5：带有复选框的树(选中父时子选中)</div>
				<div id="simple-05-parent" style="width:300px;height:300px;border:1px solid #AAAAAA;"></div>
				<div><a href="javascript:;" onclick="showJsCode('05',event);">js代码</a></div>
				<div id="code-05" style="display: none;">//引用js，src路径根据具体开发时设置
					&lt;script type="text/javascript" src="tree-min/tree.js"&gt;&lt;/script&gt;
					window.onload=function(){
						initData();
						simple05();
					}
					//初始化树数据，默认存储为一个列表
					function initData(){
						window.dataList=[];
						dataList.push({id:'10000',name:'宇燕树',parentId:""});//根
						
						dataList.push({id:'10100',name:'默认树',parentId:"10000"});//默认树
						dataList.push({id:'10200',name:'数据树',parentId:"10000"});//数据树
						dataList.push({id:'10300',name:'组织树',parentId:"10000"});//组织树
						dataList.push({id:'10400',name:'人员树',parentId:"10000"});//人员树
						dataList.push({id:'10500',name:'其它树',parentId:"10000"});//其它树
						
						dataList.push({id:'10101',name:'默认节点',parentId:"10100"});//默认节点
						
						dataList.push({id:'10201',name:'秘钥节点',type:'key',parentId:"10200"});//秘钥节点
						dataList.push({id:'10202',name:'数据库节点',type:'database',parentId:"10200"});//数据库节点
						dataList.push({id:'10203',name:'数据源节点',type:'datasource',parentId:"10200"});//数据源节点
						dataList.push({id:'10204',name:'表节点',type:'table',parentId:"10200"});//数据源节点
						
						dataList.push({id:'10301',name:'组织节点',type:'org',parentId:"10300"});//组织节点
						dataList.push({id:'10301',name:'组织节点(灰)',type:'cancel-org',parentId:"10300"});//组织节点(灰)
						
						dataList.push({id:'10401',name:'人员节点',type:'person',parentId:"10400"});//人员节点
						dataList.push({id:'10402',name:'人员节点(灰)',type:'cancel-person',parentId:"10400"});//人员节点(灰)
						dataList.push({id:'10403',name:'人员节点2',type:'person2',parentId:"10400"});//人员节点(灰)
						
						dataList.push({id:'10501',name:'文件夹树',type:'folder',parentId:"10500"});//
						dataList.push({id:'10502',name:'方法树',type:'function',parentId:"10500"});//
						dataList.push({id:'10503',name:'文件节点',type:'file',parentId:"10500"});//
						dataList.push({id:'10504',name:'流程节点',type:'flow',parentId:"10500"});//
						dataList.push({id:'10505',name:'任务节点',type:'task',parentId:"10500"});//
						dataList.push({id:'10506',name:'分支节点',type:'brach',parentId:"10500"});//
						dataList.push({id:'10507',name:'网页节点',type:'browser',parentId:"10500"});//
						dataList.push({id:'10508',name:'帮助文档树',type:'help',parentId:"10500"});//
						dataList.push({id:'10509',name:'图片节点',type:'photo',parentId:"10500"});//
						dataList.push({id:'10510',name:'项目2节点',type:'project2',parentId:"10500"});//
						dataList.push({id:'10511',name:'资源树',type:'resource',parentId:"10500"});//
						dataList.push({id:'10512',name:'win8树',type:'win8',parentId:"10500"});//
						
						dataList.push({id:'1050101',name:'文件夹节点',type:'folder',parentId:"10501"});//
						dataList.push({id:'1050201',name:'方法节点',type:'function',parentId:"10502"});//
						dataList.push({id:'1050801',name:'帮助文档节点',type:'help',parentId:"10508"});//
						dataList.push({id:'1051101',name:'资源树',type:'resource',parentId:"10511"});//
						dataList.push({id:'1051201',name:'win8节点',type:'win8',parentId:"10512"});//
					}
					//例5方法，创建树及显示树
					function simple05(){
						var tree=new Tree('simple-05');//Tree有一个参数id，方便在其它地方调用，可使用方法Tree.getTree(id)获取树
						parseTreeNode(tree, "", dataList, {});
						tree.show('simple-05-parent', undefined, true);
					}
					//解析初始化的数据列表
					function parseTreeNode(parentNode, parentId, dataList, checkbox){
						var node;
						for (var i = 0,length=dataList.length; i < length; i++) {
							if(dataList[i].parentId==parentId){
								var node=new TreeNode({
									id			:	dataList[i].id,
									name		:	dataList[i].name,
									type		:	dataList[i].type,
									checkbox	:	checkbox||undefined,
									open		:	true
								});
								parentNode.append(node);
								parseTreeNode(node, node.id, dataList, checkbox);
							}
						}
					}
					<!-- 页面html代码 -->
					<div id="simple-03-parent" style="width:300px;height:300px;border:1px solid #AAAAAA;">
					</div>
				</div>
			</span>
			<span style="float:left;margin:3px;width:302px;">
				<div>例6：带有复选框的树(选中父时子不选中)</div>
				<div id="simple-06-parent" style="width:300px;height:300px;border:1px solid #AAAAAA;"></div>
				<div><a href="javascript:;" onclick="showJsCode('06',event);">js代码</a></div>
				<div id="code-06" style="display: none;">//引用js，src路径根据具体开发时设置
					&lt;script type="text/javascript" src="tree-min/tree.js"&gt;&lt;/script&gt;
					window.onload=function(){
						initData();
						simple06();
					}
					//初始化树数据，默认存储为一个列表
					function initData(){
						window.dataList=[];
						dataList.push({id:'10000',name:'宇燕树',parentId:""});//根
						
						dataList.push({id:'10100',name:'默认树',parentId:"10000"});//默认树
						dataList.push({id:'10200',name:'数据树',parentId:"10000"});//数据树
						dataList.push({id:'10300',name:'组织树',parentId:"10000"});//组织树
						dataList.push({id:'10400',name:'人员树',parentId:"10000"});//人员树
						dataList.push({id:'10500',name:'其它树',parentId:"10000"});//其它树
						
						dataList.push({id:'10101',name:'默认节点',parentId:"10100"});//默认节点
						
						dataList.push({id:'10201',name:'秘钥节点',type:'key',parentId:"10200"});//秘钥节点
						dataList.push({id:'10202',name:'数据库节点',type:'database',parentId:"10200"});//数据库节点
						dataList.push({id:'10203',name:'数据源节点',type:'datasource',parentId:"10200"});//数据源节点
						dataList.push({id:'10204',name:'表节点',type:'table',parentId:"10200"});//数据源节点
						
						dataList.push({id:'10301',name:'组织节点',type:'org',parentId:"10300"});//组织节点
						dataList.push({id:'10301',name:'组织节点(灰)',type:'cancel-org',parentId:"10300"});//组织节点(灰)
						
						dataList.push({id:'10401',name:'人员节点',type:'person',parentId:"10400"});//人员节点
						dataList.push({id:'10402',name:'人员节点(灰)',type:'cancel-person',parentId:"10400"});//人员节点(灰)
						dataList.push({id:'10403',name:'人员节点2',type:'person2',parentId:"10400"});//人员节点(灰)
						
						dataList.push({id:'10501',name:'文件夹树',type:'folder',parentId:"10500"});//
						dataList.push({id:'10502',name:'方法树',type:'function',parentId:"10500"});//
						dataList.push({id:'10503',name:'文件节点',type:'file',parentId:"10500"});//
						dataList.push({id:'10504',name:'流程节点',type:'flow',parentId:"10500"});//
						dataList.push({id:'10505',name:'任务节点',type:'task',parentId:"10500"});//
						dataList.push({id:'10506',name:'分支节点',type:'brach',parentId:"10500"});//
						dataList.push({id:'10507',name:'网页节点',type:'browser',parentId:"10500"});//
						dataList.push({id:'10508',name:'帮助文档树',type:'help',parentId:"10500"});//
						dataList.push({id:'10509',name:'图片节点',type:'photo',parentId:"10500"});//
						dataList.push({id:'10510',name:'项目2节点',type:'project2',parentId:"10500"});//
						dataList.push({id:'10511',name:'资源树',type:'resource',parentId:"10500"});//
						dataList.push({id:'10512',name:'win8树',type:'win8',parentId:"10500"});//
						
						dataList.push({id:'1050101',name:'文件夹节点',type:'folder',parentId:"10501"});//
						dataList.push({id:'1050201',name:'方法节点',type:'function',parentId:"10502"});//
						dataList.push({id:'1050801',name:'帮助文档节点',type:'help',parentId:"10508"});//
						dataList.push({id:'1051101',name:'资源树',type:'resource',parentId:"10511"});//
						dataList.push({id:'1051201',name:'win8节点',type:'win8',parentId:"10512"});//
					}
					//例6方法，创建树及显示树
					function simple06(){
						var tree=new Tree('simple-06');//Tree有一个参数id，方便在其它地方调用，可使用方法Tree.getTree(id)获取树
						parseTreeNode(tree, "", dataList, {click:function(){return false;}});
						tree.show('simple-06-parent', undefined, true);
					}
					//解析初始化的数据列表
					function parseTreeNode(parentNode, parentId, dataList, checkbox){
						var node;
						for (var i = 0,length=dataList.length; i < length; i++) {
							if(dataList[i].parentId==parentId){
								var node=new TreeNode({
									id			:	dataList[i].id,
									name		:	dataList[i].name,
									type		:	dataList[i].type,
									checkbox	:	checkbox||undefined,
									open		:	true
								});
								parentNode.append(node);
								parseTreeNode(node, node.id, dataList, checkbox);
							}
						}
					}
					<!-- 页面html代码 -->
					<div id="simple-03-parent" style="width:300px;height:300px;border:1px solid #AAAAAA;">
					</div>
				</div>
			</span>
			<span style="float:left;margin:3px;width:604px;">
				<div></div>
				<div style="color:red;font-size:15px;height:300px;text-align:center;font-weight:bolder;">
					<div style="line-height:40px;padding-top:100px;">
						先写些简单点的例子，希望大家提出宝贵意见和建议<br>
						QQ:348184835(非技术问题勿扰)
					</div>
				</div>
				<div></div>
			</span>
		</div>
	</body>
</html>